<template>
  <div>
    <h2 class="text-xl font-bold text-gray-800 mb-6">技能特长</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- 专业技能 -->
      <div>
        <h3 class="text-lg font-medium text-gray-800 mb-4">专业技能</h3>
        <div class="space-y-4">
          <div v-for="skill in professionalSkills" :key="skill.name">
            <div class="flex justify-between mb-1">
              <span class="text-gray-700">{{ skill.name }}</span>
              <span class="text-gray-500 text-sm">{{ skill.level }}</span>
            </div>
            <div class="skill-bar h-2 bg-gray-200 rounded-full overflow-hidden">
              <div 
                class="skill-progress h-full bg-primary transition-all duration-300"
                :style="{ width: skill.percentage + '%' }"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 工具与技术 -->
      <div>
        <h3 class="text-lg font-medium text-gray-800 mb-4">工具与技术</h3>
        <div class="space-y-4">
          <div v-for="tool in tools" :key="tool.name">
            <div class="flex justify-between mb-1">
              <span class="text-gray-700">{{ tool.name }}</span>
              <span class="text-gray-500 text-sm">{{ tool.level }}</span>
            </div>
            <div class="skill-bar h-2 bg-gray-200 rounded-full overflow-hidden">
              <div 
                class="skill-progress h-full bg-primary transition-all duration-300"
                :style="{ width: tool.percentage + '%' }"
              ></div>
            </div>
          </div>
        </div>

        <h3 class="text-lg font-medium text-gray-800 mt-8 mb-4">语言能力</h3>
        <div class="space-y-4">
          <div v-for="language in languages" :key="language.name">
            <div class="flex justify-between mb-1">
              <span class="text-gray-700">{{ language.name }}</span>
              <span class="text-gray-500 text-sm">{{ language.level }}</span>
            </div>
            <div class="skill-bar h-2 bg-gray-200 rounded-full overflow-hidden">
              <div 
                class="skill-progress h-full bg-primary transition-all duration-300"
                :style="{ width: language.percentage + '%' }"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Candidate } from '../types'

interface Props {
  candidate: Candidate
}

defineProps<Props>()

const professionalSkills = [
  { name: '专业技能1', level: '精通', percentage: 90 },
  { name: '专业技能2', level: '熟练', percentage: 80 },
  { name: '专业技能3', level: '熟练', percentage: 85 }
]

const tools = [
  { name: '工具1', level: '精通', percentage: 90 },
  { name: '工具2', level: '熟练', percentage: 75 },
  { name: '工具3', level: '熟悉', percentage: 70 }
]

const languages = [
  { name: '中文（母语）', level: '精通', percentage: 100 },
  { name: '英语', level: '精通', percentage: 90 },
  { name: '其他语言', level: '熟练', percentage: 75 }
]
</script>
